<template>
    <div class="app">
        <myNavbar title="发货"></myNavbar>
        <list>
            <cell>
                <div class="shipping_order">
                    <div class="shipping_order_Header">
                        <text class="shipping_order_Header_Title">商品明细</text>
                    </div>
                    <div class="details_order_item" v-for="item in itemList">
                        <div class="details_order_item_img">
                            <image style="width:170px;height:170px" :src="item.thumbnail"></image>
                        </div>
                        <div class="details_order_item_content">
                            <div class="details_order_item_content_top">
                                <text class="details_order_item_title">{{item.name}}</text>
                                <div style="display: flex;flex-direction: row">
                                    <text class="details_order_red_icon">¥</text>
                                    <text class="details_order_red_font">{{item.price | price}}</text>
                                </div>
                            </div>
                            <div class="details_order_item_content_bottom">
                                <text class="details_order_item_subtitle">{{item.spec}}</text>
                                <text class="details_order_item_number"> x {{item.quantity | number}}</text>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="shipping_order">
                    <div class="shipping_order_Header">
                        <text class="shipping_order_Header_Title">送货地址</text>
                    </div>
                    <div class="details_address">
                        <div class="details_address_top">
                            <text class="details_address_name">{{orderForm.consignee}}</text>
                            <text class="details_address_phone">{{orderForm.phone}}</text>
                            <div class="details_lines"></div>
                            <text class="details_right_copy" @click="copyAddressClick">复制</text>
                        </div>
                        <div class="details_address_bottom">
                            <text class="details_address_title">{{orderForm.address}}</text>
                        </div>
                    </div>
                </div>
                <div class="shipping_order">
                    <div class="shipping_order_Header">
                        <text class="shipping_order_Header_Title">配送信息</text>
                    </div>
                    <div class="shippingInfo" style="margin-top: 30px">
                        <text class="shippingInfo_title">配送时间</text>
                        <div class="shippingInfo_box">
                            <div style="display:flex;flex-direction:row;align-item:center">
                                <text class="shippingInfo_subtitle">{{shippingDate}}</text>
                            </div>
                        </div>
                    </div>
                    <div class="shippingInfo" @click="siteClick" style="margin-top: 30px">
                        <text class="shippingInfo_title">配送站点</text>
                        <div class="shippingInfo_box">
                            <div style="display:flex;flex-direction:row;align-item:center">
                                <text class="shippingInfo_subtitle">{{shopName}}</text>
                                <icon content="ios-arrow-forward" class="submit_product_details_Icon"></icon>
                            </div>
                        </div>
                    </div>
                    <div class="shippingInfo" style="margin-top: 30px" @click="personnelClick" v-if="orderForm.shippingMethod==2 && productSubtype == true">
                        <text class="shippingInfo_title">配送人员</text>
                        <div class="shippingInfo_box">
                            <div style="display:flex;flex-direction:row;align-item:center">
                                <text class="shippingInfo_subtitle">{{personnelName}}</text>
                                <icon content="ios-arrow-forward" class="submit_product_details_Icon"></icon>
                            </div>
                        </div>
                    </div>
                    <div class="shippingInfo" style="margin-top: 30px" @click="packageClick" v-if="weekType == true">
                        <text class="shippingInfo_title">配送周期</text>
                        <div class="shippingInfo_box">
                            <div style="display:flex;flex-direction:row;align-item:center">
                                <div style="display:flex;flex-direction:row;align-item:center" v-for="(item,index) in weexDate">
                                    <text class="shippingInfo_subtitle">{{item.title}}</text>
                                    <text class="shippingInfo_subtitle" v-if="index+1 != weexDate.length">、</text>
                                </div>
                                <icon content="ios-arrow-forward" class="submit_product_details_Icon"></icon>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="isMask_Botton">
                    <button class="isMask_Botton_Box botton_Bg_Color" @click="aDeliveryClick" :text="submitTitle" :loading="submitLoad"></button>
                </div>
                <shippingSite :shopIndex="shopIndex" v-if="siteType == true" @cencleSite="cencleSite"
                              @completeSite="completeSite"></shippingSite>
                <personnel :personnelIndex="personnelIndex" v-if="personnelType == true"
                           @completePersonnel="completePersonnel" @cenclePersonnel="cenclePersonnel"></personnel>
                <packagebox @cenclePackage="cenclePackage" @saveClick="saveClick" v-if="packageType == true"></packagebox>
            </cell>
        </list>

    </div>
</template>

<script>
    const storage = weex.requireModule('storage')
    const modal = weex.requireModule('modal')
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
    import shippingSite from '../../../pages/member/declaration/components/shippingSite.vue'
    import personnel from '../../../pages/member/declaration/components/personnel.vue'
    import packagebox from '../../../components/package/package.vue'
    import {
        find,shipping
    } from '../../../api/order';
    const eeui = app.requireModule('eeui');
    import {receiverLocation} from '@/api/mapLine'
    export default {
        data(){
            return{
                orderForm:[],
                itemList:[],
                shippingDate:'',
                shopName: '',
                shopIndex: 0,
                personnelIndex: 0,
                personnelName: '',
                siteType: false,
                personnelType: false,
                weexDate:[{title:'请选择配送日期'}],
                packageType:false,
                weexTime:'',
                weekType: false,
                shopId:'',
                operatorId:'',
                productSubtype:false,
                submitLoad:false,
                submitTitle:'完成'
            }
        },
        components:{
            myNavbar,shippingSite,personnel,packagebox
        },
        created() {
            this.initIconFont()
            this.id = app.config.params
            this.shippingDate = this.currentDate(new Date())
        },
        mounted() {
            this.findClick(this.id)
        },
        filters:{
            price(value) {
                var toFixedNum = Number(value).toFixed(3);
                var realVal = toFixedNum.substring(0, toFixedNum.toString().length - 1);
                return realVal;
            },
            number(value){
                var toFixedNum = Number(value).toFixed(0);
                return toFixedNum;
            }
        },
        methods:{
            findClick(data) {
                var _this = this
                find(data).then(
                    res => {
                        console.log(res)
                        if (res.type == 'success') {
                            _this.orderForm = res.data.order;
                            _this.orderForm.createDate = _this.formatTime(_this.orderForm.createDate)
                            _this.orderForm.itemList.forEach(function (item) {
                                item.thumbnail = _this.thumbnail(item.thumbnail, 170, 170)
                            })
                            _this.itemList = _this.orderForm.itemList
                            if (!this.isNull(res.data.order.itemList)) {
                                var packageForm = []
                                res.data.order.itemList.forEach(function (item) {
                                    if (item.subType == 1) {
                                        packageForm.push(item)
                                    }
                                    if (item.subType == 0 || item.subType == 4){
                                        _this.productSubtype = true
                                    }
                                })
                                if (packageForm.length > 0) {
                                    _this.weekType = true
                                } else {
                                    _this.weekType = false
                                }
                            }
                            if (_this.orderForm.shopId == undefined){
                                _this.shopId = ''
                                _this.shopName = ''
                            }else {
                                _this.shopId = _this.orderForm.shopId
                                _this.shopName = res.data.shopName
                            }
                            if (_this.orderForm.shippingEmployeeId == undefined){
                                _this.operatorId = ''
                                _this.personnelName = ''
                            }else {
                                _this.operatorId = _this.orderForm.shippingEmployeeId
                                _this.personnelName = res.data.shippingEmployeeName
                            }
                            _this.receiverLocationClick()
                        }
                    }
                ).catch(error => {
                })
            },
            //配送站点
            siteClick() {
                this.siteType = true
            },
            cencleSite() {
                this.siteType = false
            },
            completeSite(data) {
                this.siteType = false
                this.shopId = data.from.id
                this.shopName = data.from.name
                this.shopIndex = data.shopIndex
            },
            //配送人员
            personnelClick() {
                this.personnelType = true
            },
            completePersonnel(data) {
                this.personnelType = false;
                this.operatorId = data.from.id
                this.personnelName = data.from.name
                this.personnelIndex = data.personnelIndex
            },
            cenclePersonnel() {
                this.personnelType = false
            },
            saveClick(data){
                var _this = this
                _this.weexDate = []
                _this.weexTime = data.weexTime
                if (data.weexData.length != 0){
                    _this.weexDate = data.weexData
                }else{
                    _this.weexDate = [
                        {title:'请选择配送日期'}
                    ]
                }
                this.packageType = false
            },
            packageClick(){
                this.packageType = !this.packageType
            },
            cenclePackage(){
                this.packageType = false
            },
            aDeliveryClick() {
                var _this = this;
                if (_this.orderForm.shippingMethod==2 && _this.productSubtype == true) {
                    if (_this.operatorId == ""){
                        eeui.toast('请选择配送员')
                        return
                    }
                }
                this.itemList.forEach(item => { // 初始化发货数量
                    item.shippedQuantity = item.availableShippedQuantity
                })
               var form = {
                    shopId:_this.shopId,
                    orderDate:_this.shippingDate,
                    weekTime:_this.weexTime,
                    shippingEmployeeId:_this.operatorId,
                };
                _this.submitLoad=true;
                _this.submitTitle='加载中'
                console.log(this.getGlobalData().token)
                shipping(_this.id, JSON.stringify(_this.itemList), form).then(response => {
                    _this.submitLoad=false;
                    _this.submitTitle='完成'
                    eeui.toast(response.content)
                    eeui.closePage()
                    storage.setItem('orderShipping', 'true', event => {

                    })
                }).catch(error => {
                    console.log(error)
                    _this.submitLoad=false;
                    _this.submitTitle='完成'
                })
            },
            //后台返回所需参数
            receiverLocationClick() {
                var _this = this
                if (_this.orderForm.receiverId == undefined){
                    _this.orderForm.receiverId=''
                }
                receiverLocation({receiverId: _this.orderForm.receiverId}).then(
                    res => {
                        console.log('11111')
                        console.log(JSON.stringify(res))
                        console.log(_this.orderForm.shopId)
                        if (_this.orderForm.shopId == undefined){
                            _this.shopId = res.data.mapLine.shopId
                            _this.shopName = res.data.shopName
                        }
                        if (_this.orderForm.shippingEmployeeId == undefined){
                            _this.operatorId = res.data.mapLine.shippingEmployeeId
                            _this.personnelName = res.data.shippingEmployeeName
                        }
                    }
                ).catch(error => {

                })
            },
            copyAddressClick(){
                eeui.toast('复制成功')
                eeui.copyText(this.orderForm.consignee + this.orderForm.phone  + this.orderForm.address)
            }
        }
    }
</script>
<style lang="css" src="../../../style/wx.css"/>
<style scoped>
    .app, body {
        background-color: rgba(248, 248, 248, 0.8);
    }
    .app{
        flex: 1;
    }
    .shipping_order {
        width: 690px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        margin-top: 30px;
        margin-left: 30px;
        box-sizing: border-box;
        padding-top: 20px;
        padding-left: 25px;
        padding-right: 25px;
        padding-bottom: 20px;
        overflow: hidden;
    }
    .shipping_order_Header{
        /*margin-top: 20px;*/
    }
    .shipping_order_Header_Title {
        font-size: 34px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
    }
    .details_order_item {
        display: flex;
        flex-direction: row;
        /*margin-bottom: 40px;*/
        margin-top: 20px;
    }

    .details_order_item_img {
        width: 170px;
        height: 170px;
        background: rgba(250, 250, 250, 1);
        border-radius: 4px;
        overflow: hidden;
    }

    .details_order_item_content {
        display: flex;
        flex-direction: column;
        width: 450px;
        margin-left: 20px;
        position: relative;
    }

    .details_order_item_content_top {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 5px;
    }

    .details_order_item_title {
        font-size: 28px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 42px;
        text-overflow: ellipsis;
        lines: 1;
        width: 360px;
    }


    .details_order_item_content_bottom {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .details_order_item_subtitle {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
        lines:2;
        text-overflow: ellipsis;
        width: 360px;
    }

    .details_order_item_number {
        font-size: 24px;
        font-weight: 400;
        color: rgba(26, 26, 30, 1);
        line-height: 36px;
        opacity: 0.5;
    }
    .details_order_red_icon {
        font-size: 20px;
        font-weight: 500;
        color: rgba(231, 91, 83, 1);
        line-height: 42px;
    }

    .details_order_red_font {
        font-size: 28px;
        font-weight: 500;
        color: rgba(231, 91, 83, 1);
        line-height: 42px;
    }
    .details_address {
        width: 700px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        /*padding-top: 25px;*/
        padding-right: 25px;
        /*padding-bottom: 25px;*/
        margin-top: 20px;
        box-sizing: border-box;
    }

    .details_address_top {
        margin-bottom: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .details_address_name {
        font-size: 28px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
    }

    .details_address_phone {
        font-size: 28px;
        font-weight: 500;
        color: rgba(26, 26, 30, 1);
        margin-left: 10px;
    }

    .details_address_bottom {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .details_address_title {
        font-size: 24px;
        font-weight: 400;
        width: 650px;
        color: rgba(26, 26, 30, 1);
    }
    .shippingInfo {
        display: flex;
        flex-direction: row;
        align-items: center;
        /*margin-bottom: 20px;*/
    }

    .shippingInfo_title {
        width: 170px;
        display: block;
        font-size: 30px;

    }

    .shippingInfo_box {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        width: 440px;
        margin-left: 20px;
    }

    .shippingInfo_subtitle {
        font-size: 28px;
        color: rgba(26, 26, 30, 0.3);
        line-height: 50px;
    }
    .submit_product_details_Icon {
        font-size: 40px;
        color: #888888;
        width: 30px;
        height: 50px;
        padding-top: 2px;
    }
    .submit_product_details_subtitle {
        font-size: 24px;
        color: rgba(26, 26, 30, 0.3);
        line-height: 26px;
    }
    .isMask_Botton {
        width: 750px;
        /*position: absolute;*/
        /*bottom: 30px;*/
        /*left: 0;*/
        margin-top: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }

    .isMask_Botton_Box {
        width: 690px;
        height: 80px;
        border-radius: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        font-size: 32px;
        color: white;
    }

    .isMask_Botton_Title {
        font-size: 30px;
        /* color: white; */
    }
    .details_lines{
        width: 2px;
        height: 28px;
        background-color: rgba(0,0,0,0.2);
        margin-left: 20px;
    }
    .details_right_copy{
        font-size: 28px;
        color: red;
        margin-left: 20px;
    }
</style>
